<template>
  <div>
    <div style="height: 40px">
      <h1>操作日志</h1>
    </div>
    <div style="width: 100%">
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
      <div id="shaixuan_2">

        <span id="input">
          <el-input v-model="input"
                    placeholder="输入操作人"></el-input>
        </span>
        <span id="one">
          <span class="demonstration">操作时间</span>
          <el-date-picker v-model="value"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          align="right"
                          value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </span>

        <div id="button">
          <el-button type="primary"
                     @click="select()">筛选</el-button>
        </div>
      </div>
    </div>
    <div>
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-querylist"></i>
        <span slot="title">日志列表</span>
      </div>

      <el-table :data="tableData"
                border
                style="width: 84.1%">
        <el-table-column prop=""
                         label="选择"
                         width="50"
                         align="center">
          <input type="checkbox">
        </el-table-column>
        <el-table-column prop="id"
                         label="编号"
                         width="50"
                         align="center">
        </el-table-column>
        <el-table-column prop="oprator"
                         label="操作人"
                         width="150"
                         align="center">
        </el-table-column>
        <el-table-column prop="date"
                         label="操作日期"
                         width="250"
                         align="center">
        </el-table-column>
        <el-table-column prop="ip"
                         label="ip地址"
                         width="170"
                         align="center">
        </el-table-column>
        <el-table-column prop="detail"
                         label="操作记录"
                         width="300"
                         align="center">
        </el-table-column>

        <el-table-column fixed="right"
                         label="操作"
                         width="80"
                         align="center">

          <el-button type="text"
                     size="small"
                     style="background-color: red; color: #ebebeb">删除</el-button>

        </el-table-column>
      </el-table>
      <div id="all">
        <input type="checkbox"
               id="checkall">全选
      </div>
      <el-button type="danger"
                 id="delall"
                 size="mini">批量删除</el-button>
      <div id="page">
        <el-pagination background
                       layout="prev, pager, next"
                       :total="100">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Log',
  data() {
    return {
      input: '',
      value: '',
      tableData: [],
    }
  },
  methods: {
    select: function () {
      this.$axios
        .post(
          'http://localhost:9527/log/find?start=' +
            this.value[0] +
            '&end=' +
            this.value[1] +
            '&oprator=' +
            this.input
        )
        .then((res) => {
          console.log(res)
          this.tableData = res.data.data
        })
    },
    created() {
      this.$axios.get('http://localhost:9527/log/findLog').then((res) => {
        console.log(res)
        this.tableData = res.data.data
      })
    },
  },
  created() {
    this.created()
  },
}
</script>

<style scoped>
.shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#one {
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
</style>
